import React from "react";
import moment from "moment"
import { Input, Row, Col, Button, message, Drawer ,List} from "antd";
import "./App.css";
import "./Demo2.css";
class Demo2 extends React.PureComponent {
  state = {
    inputContent: "",
    visible: false,
    historyArr:[]
  };
  componentDidMount(){
    this.setState({historyArr:JSON.parse(localStorage.getItem("calHistory"))||[]})
  }
  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  handleNumberInput = (e) => {
    let value;
    switch (e.target.innerText) {
      case "+":
      case "-":
      case "*":
      case "/":
      case "%":
        value = this.state.inputContent + " " + e.target.innerText + " ";
        break;
      default:
        value = this.state.inputContent + e.target.innerText;
    }
    this.setState({ inputContent: value });
  };
  handleOperation = () => {
    const { inputContent } = this.state;
    const resultArr = inputContent.split(" ");
    const optionArr = [];
    for (let i = 0; i < resultArr.length; i++) {
      const currentData = resultArr[i];
      const nextData = resultArr[i + 1];
      let temp;
      switch (currentData) {
        case "+":
          break;
        case "-":
          temp = -parseFloat(nextData);
          optionArr.push(temp);
          i++;
          break;
        case "*":
          temp = optionArr.pop() * parseFloat(nextData);
          optionArr.push(temp);
          i++;
          break;
        case "/":
          if (parseFloat(nextData) !== 0) {
            temp = optionArr.pop() / parseFloat(nextData);
            i++;
            optionArr.push(temp);
          } else {
            message.error("除数错误");
          }
          break;
        case "%":
          if (parseFloat(nextData) !== 0) {
            temp = optionArr.pop() % parseFloat(nextData);
            i++;
            optionArr.push(temp);
          } else {
            message.error("除数错误");
          }
          break;
        default: //字符串转数字
          optionArr.push(parseFloat(currentData));
          break;
      }
    }
    let resultData = 0;
    optionArr.forEach((v) => (resultData += v));
    let str = this.state.inputContent + " = " + resultData;
    window.localStorage.setItem("calHistory", str);
    this.setState(
      {
        inputContent: resultData,
      },
      () => {
        this.handleSaveDataToStorage();
      }
    );
  };
  
  handleSaveDataToStorage = () => {
    const { historyArr } = this.state;
    let history_obj={
        time:moment().format('YYYY-MM-DD hh:mm:ss a'),
        history:localStorage.getItem("calHistory")
    }
    historyArr.push(history_obj);
    const data = JSON.stringify(historyArr);

    window.localStorage.setItem("calHistory", data);

  };
  cl = () => {
    this.setState({
      inputContent: "",
    });
  };
  back = () => {
    let str = this.state.inputContent;
    if (str[str.length - 1] === " ") {
      str = str.slice(0, str.length - 3);
    } else {
      str = str.slice(0, str.length - 1);
    }
    this.setState({ inputContent: str });
  };
  cal = () => {
    // eslint-disable-next-line no-eval
    const resultData = eval(this.state.inputContent);
    this.setState({
      inputContent: this.state.inputContent + " = " + resultData,
    });
  };
  render() {
    return (
      <>
        <div className="div_main">
          <div className="div_input">
            <Input className="input_number" value={this.state.inputContent} />
          </div>
          <div className="div_btn">
            <div className="btnRow">
              <Row
                className="deepGrey"
                typeof="flex"
                justify="space-around"
                align="middle"
              >
                <Col span={6}>
                  <Button
                    type="primary"
                    className="btn deepGrey"
                    onClick={this.cl}
                  >
                    AC
                  </Button>
                </Col>
                <Col span={6}>
                  <Button className="btn deepGrey" onClick={this.back}>
                    Back
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn deepGrey"
                    onClick={this.handleNumberInput}
                  >
                    %
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn orange"
                    onClick={this.handleNumberInput}
                  >
                    /
                  </Button>
                </Col>
              </Row>
            </div>
            <div className="btnRow">
              <Row typeof="flex" justify="space-around" align="middle">
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    1
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    2
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    3
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn orange"
                    onClick={this.handleNumberInput}
                  >
                    *
                  </Button>
                </Col>
              </Row>
            </div>
            <div className="btnRow">
              <Row typeof="flex" justify="space-around" align="middle">
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    4
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    5
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    6
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn orange"
                    onClick={this.handleNumberInput}
                  >
                    +
                  </Button>
                </Col>
              </Row>
            </div>
            <div className="btnRow">
              <Row typeof="flex" justify="space-around" align="middle">
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    7
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    8
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    9
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn orange"
                    onClick={this.handleNumberInput}
                  >
                    -
                  </Button>
                </Col>
              </Row>
            </div>
            <div className="btnRow">
              <Row typeof="flex" justify="space-around" align="middle">
                <Col span={12}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    0
                  </Button>
                </Col>
                <Col span={6}>
                  <Button
                    className="btn lightGrey"
                    onClick={this.handleNumberInput}
                  >
                    .
                  </Button>
                </Col>
                <Col span={6}>
                  <Button className="btn orange" onClick={this.handleOperation}>
                    =
                  </Button>
                </Col>
              </Row>
            </div>
            <div className="btnRow">
              <Row typeof="flex" justify="space-around" align="middle">
                <Col span={24}>
                  <Button className="btn orange" onClick={this.showDrawer}>
                    History
                  </Button>
                </Col>
              </Row>
            </div>
            <Drawer
              title="计算历史"
              placement="bottom"
              closable={true}
              onClose={this.onClose}
              visible={this.state.visible}
            >
            <List
            bordered
            dataSource={this.state.historyArr}
            renderItem={(item) => (
            <List.Item>
            [{item.time}]{item.history}
            </List.Item>
            )}
          />
            </Drawer>
          </div>
        </div>
      </>
    );
  }
}

export default Demo2;
